<!DOCTYPE html>
<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>ok-admin v2.0 | 很赞的后台模版 - 注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/oksub.css"/>
    <style>
        #login form.layui-form {
            margin: 0;
            transform: translate(-50%, -50%);
        }

        .register .tit {
            padding-top: 15px;
            text-align: center;
            font-size: 18px;
        }

        .register .code-box {
            display: flex;
        }

        .register .code-box .btn-auth-code {
            margin-left: 10px;
        }
    </style>
</head>
<body class="page-fill">
    <div class="page-fill register" id="login">
        <form class="layui-form ">
            <div class="layui-form-item tit">注册</div>
            <div class="layui-form-item input-item">
                <label for="username">昵称</label>
                <input type="text" lay-verify="required" name="nickname" placeholder="请输入昵称" autocomplete="off" id="nickname" class="layui-input" v-model="nickname">
            </div>
            <div class="layui-form-item input-item">
                <label for="username">用户名</label>
                <input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input" v-model="username">
            </div>
            <div class="layui-form-item input-item">
                <label for="password">密码</label>
                <input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input" v-model="pwd">
            </div>
            <div class="layui-form-item input-item">
                <label for="comPassword">确认密码</label>
                <input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
            </div>

            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="login" lay-submit="">注册</button>
            </div>
            <div class="login-link">
                <a href="login.html">有账号去登录</a>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        let register=  new Vue({
            el:"#login",
            data:{
                nickname:'',
                username:'',
                pwd:'',

            },
            methods: {
                fetchRegister() {
                    var params = new URLSearchParams();
                    params.append("nickname", this.nickname);
                    params.append("username", this.username);
                    params.append("pwd", this.pwd);

                    axios.post("../login?op=register", params).then(resp => {
                        let jm=resp.data;
                        if (jm.code===1){
                            alert("注册成功");
                            window.location = "../html/login.html";
                        }else if (jm.code===0){
                            alert("注册失败");
                        }else {
                            alert("系统出错");
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
            },
            mounted(){
                let vm=this;
                layui.use(["form", "okGVerify", "okLayer"], function () {
                    let form = layui.form;
                    let $ = layui.jquery;
                    let okGVerify = layui.okGVerify;
                    let okLayer = layui.okLayer;


                    /**
                     * 数据校验
                     */
                    form.verify({
                        password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],

                        comPassword: function (val) {
                            let password = $("#password").val();
                            return password == val ? '' : "两次密码不一致";
                        }
                    });

                    /**
                     * 表单提交
                     */
                    form.on("submit(login)", function (data) {
                        data.elem.disabled = true; // 禁用提交按钮，防止重复提交
                        console.log("username="+vm.username+"pwd="+vm.pwd);
                        vm.fetchRegister(); // 调用Vue.js的注册方法
                        return false; // 阻止表单的默认提交

                    });

                    /**
                     * 表单input组件单击时
                     */
                    $("#login .input-item .layui-input").click(function (e) {
                        e.stopPropagation();
                        $(this).addClass("layui-input-focus").find(".layui-input").focus();
                    });

                    /**
                     * 表单input组件获取焦点时
                     */
                    $("#login .layui-form-item .layui-input").focus(function () {
                        $(this).parent().addClass("layui-input-focus");
                    });

                    /**
                     * 表单input组件失去焦点时
                     */
                    $("#login .layui-form-item .layui-input").blur(function () {
                        $(this).parent().removeClass("layui-input-focus");
                        if ($(this).val() != "") {
                            $(this).parent().addClass("layui-input-active");
                        } else {
                            $(this).parent().removeClass("layui-input-active");
                        }
                    });

                });
            }
        });

    </script>
</body>
</html>
